<template>
    <div class="mui-content successTips">
        <!--成功-->
        <section class="success">
            <div class="icon">
                <div class="line_short"></div>
                <div class="line_long"></div>
            </div>
            <p class="evaluateTime mui-text-center color2 text3">{{operateTime|date}}</p>
            <p class="evaluateText mui-text-center color1 text2">{{msg}}</p>
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined viewEvaluateBtn text2-size" @click="toUrl()">{{btnMsg}}</button>
        </section>
    </div>
</template>
<style>
    .successTips .success p{margin-bottom: 0 !important;}
    .evaluateTime{font-size: 0.3rem;}
    .viewEvaluateBtn{font-size: 0.35rem; width: 40%; margin-left: 30%; margin-top: 0.3rem;}
    .success .icon{width: 100px; height: 100px; border-radius: 100%; background: #007aff; margin: 0.5rem auto;  position: relative; }
    .success .icon .line_short{width: 25px;  height: 5px; position: absolute;  left: 24px;  top: 55px;  border-radius: 4px;  background-color: #FFF;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  transform: rotate(45deg);  -webkit-animation: success_short_Animation .65s;  -moz-animation: success_short_Animation .65s;  animation: success_short_Animation .65s;}
    .success .icon .line_long{width: 47px;  height: 5px; position: absolute;  right: 17px;  top: 48px;  border-radius: 30px;  background-color: #FFF;  -webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);  transform: rotate(-45deg);  -webkit-animation: success_long_Animation .65s;  -moz-animation: success_long_Animation .65s;  animation: success_long_Animation .65s}

    /*评价成功图标动画*/
    @-webkit-keyframes success_short_Animation {
        0% {
            width: 0;
            left: 11px;
            top: 29px
        }

        54% {
            width: 0;
            left: 11px;
            top: 29px
        }

        70% {
            width: 50px;
            left: 6px;
            top: 47px
        }

        84% {
            width: 17px;
            left: 31px;
            top: 58px
        }

        100% {
            width: 25px;
            left: 24px;
            top: 55px
        }
    }

    @-moz-keyframes success_short_Animation {
        0% {
            width: 0;
            left: 11px;
            top: 29px
        }

        54% {
            width: 0;
            left: 11px;
            top: 29px
        }

        70% {
            width: 50px;
            left: 6px;
            top: 47px
        }

        84% {
            width: 17px;
            left: 31px;
            top: 58px
        }

        100% {
            width: 25px;
            left: 24px;
            top: 55px
        }
    }

    @keyframes success_short_Animation {
        0% {
            width: 0;
            left: 11px;
            top: 29px
        }

        54% {
            width: 0;
            left: 11px;
            top: 29px
        }

        70% {
            width: 50px;
            left: 6px;
            top: 47px
        }

        84% {
            width: 17px;
            left: 31px;
            top: 58px
        }

        100% {
            width: 25px;
            left: 24px;
            top: 55px
        }
    }
    @-webkit-keyframes success_long_Animation {
        0% {
            width: 0;
            right: 55px;
            top: 64px
        }

        65% {
            width: 0;
            right: 55px;
            top: 64px
        }

        84% {
            width: 55px;
            right: 9px;
            top: 45px
        }

        100% {
            width: 47px;
            right: 17px;
            top: 48px
        }
    }

    @-moz-keyframes success_long_Animation {
        0% {
            width: 0;
            right: 55px;
            top: 64px
        }

        65% {
            width: 0;
            right: 55px;
            top: 64px
        }

        84% {
            width: 55px;
            right: 9px;
            top: 45px
        }

        100% {
            width: 47px;
            right: 17px;
            top: 48px
        }
    }

    @keyframes success_long_Animation {
        0% {
            width: 0;
            right: 55px;
            top: 64px
        }

        65% {
            width: 0;
            right: 55px;
            top: 64px
        }

        84% {
            width: 55px;
            right: 9px;
            top: 45px
        }

        100% {
            width: 47px;
            right: 17px;
            top: 48px
        }
    }
</style>

<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
        export default {
            vuex:{
                getters:{
                    enterpriseFlag:function(state){
                        return state.enterpriseFlag;
                    },
                }
            },
            data(){
                return{
                	type:'',
                	msg:'评价已提交，感谢您对我们的支持！',
                	btnMsg:'查看我的评价',
                	btnUrl:'/ucenter/comments',
                    operateTime:Date.now(),
                }
            },
            ready () {
                mui.init();
                this.type=this.$route.params.type;
                if (this.type == 'feedback') {
                	this.msg = '反馈已提交，感谢您对我们的支持！';
                	this.btnMsg = '我的爱特';
                	if (this.enterpriseFlag) {
                        this.btnUrl='/enterprise/home';
                    } else {
                        this.btnUrl='/ucenter/home';
                    }

                } else if (this.type == 'banpen') {
                	this.msg = '您的服务订单已提交，我们会尽快联系您。';
                	this.btnMsg = '我的订单';
                	this.btnUrl='/ucenter/orders/all';
                } else if (this.type == 'orderCancel') {
                	this.msg = '订单已取消';
                	this.btnMsg = '查看我的订单';
                	//当前角色判断
                	if (this.enterpriseFlag) {
                        this.btnUrl='/enterprise/orders/enterAll';
                	} else {
                	    this.btnUrl='/ucenter/orders/all';
                	}

                } else if (this.type == 'confirmBound') {
                	this.msg = '手机号绑定成功！';
                	this.btnMsg = '返回个人资料';
                	this.btnUrl='/ucenter/profile';
                } else if (this.type == 'userCarConfirm') {
                	this.msg = '车辆信息录入成功！';
                	this.btnMsg = '返回我的爱特';
                	this.btnUrl='/ucenter/home';
                } else if (this.type == 'orderConfirm') {
                    this.msg = '确认订单成功，已经微信通知用户！';
                    this.btnMsg = '返回我的订单';
                    this.btnUrl='/enterprise/home';
                } else if (this.type == 'ordersign') {
                    this.msg = '维修竣工成功，已经微信通知用户！';
                    this.btnMsg = '返回企业中心';
                    this.btnUrl='/enterprise/home';
                }else if (this.type == 'appointTimeModify') {
                    this.msg = '修改预约时间成功，已经微信通知用户！';
                    this.btnMsg = '返回我的订单';
                    this.btnUrl='/enterprise/home';
                }else if(this.type == 'confirmAddr'){
                    this.msg = '恭喜您礼品领取成功！';
                    this.btnMsg = '返回车主福利';
                    this.btnUrl = '/promo/invite_activity';
                }else if(this.type=='maintenanceOrderConfirm'){
                    this.msg='保养预约已提交！';
                    this.btnMsg = '查看我的保养订单';
                    this.btnUrl = '/ucenter/orders/all';
                }
            },
            methods:{
            	toUrl:function(){
					this.$route.router.go(this.btnUrl);
				}
            },
            components:{
            }
    };

</script>
